<template>
  <div style="height: 100%;background-color:white ;padding: 10px">
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" size="small" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">word导入结果</span>
        </div>
      </div>
    </div>
    <el-row>

      <el-col :span="24" style="right: auto">

        <div style="width: 430px; float: right">
          <el-input v-model="manuscriptName" placeholder="请输入稿件名称" size="small"
                    @keyup.enter.native="getTableData">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-button slot="append" :icon="appendIcon" @click="switchAppend"></el-button>
          </el-input>
        </div>
        <div v-if="showAdvance" id="advance" style="padding: 10px; float: right">
          <div>
            <div style="width: 100px;text-align:right; display: inline-block">
              <span>状态</span>
            </div>
            <div style="display: inline-block">
              <el-select v-model="status" clearable filterable size="small" style="width: 300px;margin-top: 10px">
                <el-option label="成功" value="1">成功</el-option>
                <el-option label="失败" value="2">失败</el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100px;text-align:right; display: inline-block;margin-top: 10px">
            <span>导入时间</span>
          </div>
          <div style="display: inline-block">
            <el-date-picker
              v-model="updateTime"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              size="small"
              start-placeholder="开始日期" style="width: 300px;"
              type="datetimerange" value-format=" yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
          <div style="margin-top: 60px; right: 10px;">
            <el-row>
              <el-col :offset="7" :span="9">
                <div style="margin-left: 90px;height: 32px; width: 88px;">
                  <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                </div>
              </el-col>
              <el-col :offset="0.8" :span="2">
                <div div style="margin-left: 5px;height: 32px; width: 88px;">
                  <el-button size="small" type="success" v-on:click="replacement">重 置</el-button>
                </div>
              </el-col>
              <el-col :offset="2" :span="2">
                <div div style="margin-left: 5px;height: 32px; width: 88px;">
                  <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div>
        <el-table :data="tableData" :height="tableHeight" border stripe style="width: 100%;margin-top: 10px"
                  @selection-change="handleSelectionChange">
          <el-table-column label="稿件名称" min-width="100" prop="manuscriptName"></el-table-column>
          <el-table-column label="状态" min-width="150" prop="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">成功</span>
              <span v-if="scope.row.status==2">失败
              <el-popover
                :content="scope.row.failureReason"
                trigger="hover">
                    <el-button slot="reference" style="margin-left: 10px;" type="text"><span
                      style="color: red">详情</span></el-button>
                  </el-popover>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="导入时间" min-width="160"
                           prop="updatedTime"></el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
                <span><el-link type="danger"
                               @click.prevent="del(scope.row.id)">删除</el-link></span>
              <span><el-link v-if="scope.row.status==2" type="success"
                             @click.prevent="uploadClick(scope.row.id,scope.row.knowledgeLibId,scope.row.taskId)">重新上传</el-link></span>
              <span><el-link type="success"
                             @click.prevent="downloadWord(scope.row.path)">稿件下载</el-link></span>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination
          v-if="multiplePages"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"></el-pagination>
      </div>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" title="选择对应的问答库任务" width="500px">

      <el-row>
        <el-col :span="6">
          <span class="label">选择任务<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="18">
          <el-select v-model="selectedTaskId" filterable placeholder="请选择"
                     style="width: 100%">
            <el-option
              v-for="(item,index) in taskList"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取 消</el-button>
           <div style="display: inline-block;margin-left: 10px">
           <el-upload ref="upload"
                      :action="'/pmph/action/knowledge/wordHtml?taskId=' + this.taskId + '&knowledgeLibId='+ this.knowledgeLibId+'&QuestionAnswerTaskId='+ selectedTaskId+'&itemId='+itemId  "
                      :hidden="UTIL.isEmpty(selectedTaskId)"
                      :multiple="true"
                      :on-progress="uploadProgress"
                      :on-remove="removeFile"
                      :on-success="updateWordsTable"
                      :show-file-list="false"
                      accept=".docx"
                      auto-upload class="upload-demo">
            <el-button size="small" type="primary"> 确定导入</el-button>
          </el-upload>
           </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "wordResult",
  data() {
    return {
      tableData: [],
      multiplePages: true,
      appendIcon: "el-icon-caret-bottom",
      noData: true,
      totalNum: 0,
      showAdvance: false,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      manuscriptName: '',
      status: '',
      selectedTaskId: '',
      dialogVisible: false,
      taskList: [],
      itemId: '',
      knowledgeLibId: '',
      taskId: '',
      updateTime: '',
      activityTaskId: ''
    }
  },
  methods: {
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    }, advanceCancel() {
      this.showAdvance = false;
    },
    goBack() {
      this.$router.go("-1")
    },
    replacement: function () {
      this.manuscriptName = ''
      this.status = ''
      this.updateTime = ''
    },
    advanceConfirm() {
      this.getTableData()
      this.showAdvance = false;
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData()
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTableData()
    },
    closeDialog() {
      this.dialogVisible = false
      this.selectedTaskId = ""
      this.itemId = ""
      this.isHid = true
    },
    uploadProgress() {
      this.dialogVisible = false
      this.elLoadingComponent = Loading.service({fullscreen: true});

    },
    removeFile() {
      this.$refs.uplaod.clearFiles()
    },
    updateWordsTable(response, file, fileList) {
      if (response.data === false) {
        this.$message.error("解析失败")
      } else {
      }
      this.dialogVisible = false
      this.getTableData()
    },
    del(id) {
      this.$confirm('确认删除稿件?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = new URLSearchParams();
        param.append("id", id)
        this.axios.post("/pmph/action/activity/deleteItemById", param)
          .then(() => {
            this.getTableData()
          })
      })
    },
    uploadClick(id, knowledgeLibId, taskId) {
      this.itemId = id;
      this.knowledgeLibId = knowledgeLibId;
      this.taskId = taskId
      this.axios.get('/pmph/action/task/selectQuestionAnswerTaskId', {
        params: {}
      }).then((response) => {
        if (response.data.length > 0) {
          this.taskList = response.data
          this.dialogVisible = true

        } else {
          this.$message.warning("当前知识库没有正在进行中的任务, 请先新建任务!")
        }
      })
    },

    downloadWord(path) {
      window.location.href = '/pmph/action/activity/downloadManuscript?path=' + encodeURIComponent(path)
    },
    getTableData() {
      this.axios.get("/pmph/action/activity/selectItemTableData", {
        params: {
          manuscriptName: this.manuscriptName,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          status: this.status,
          updateTime: this.updateTime,
          taskId: this.activityTaskId
        }
      }).then((response) => {
        this.totalNum = response.data.total;
        this.tableData = response.data.records
        console.log(response)
      })
    }
  }, created() {
    this.activityTaskId = this.$route.query.taskId
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 150;
    this.getTableData()
  }
}
</script>

<style scoped>

</style>
